<template>
	<view class="loginPage col-3e bg-fff">
        <button class="clearBtn topImg bg boxShow" open-type="share"></button>
		<view class="content">
            <u-form :model="model" :rules="rules" ref="uForm" label-width="190">
                <u-form-item label="姓名" prop="nickname">
                    <u-input class="inp" focus placeholder="请输入真实姓名" v-model="model.nickname"></u-input>
                </u-form-item>
                <u-form-item label="公司/机构" prop="company">
                    <u-input class="inp" placeholder="请输入公司/机构" v-model="model.company"></u-input>
                </u-form-item>
                <u-form-item label="职位名称">
                    <u-input class="inp" placeholder="如:总经理" v-model="model.position"></u-input>
                </u-form-item>
            </u-form>
            
            <button @click="submit" class="phoneLogin getCaptcha top-25">
                提交
            </button>
		</view>
        <share-btn :display="scrollAnimate"></share-btn>
	</view>
</template>

<script>
import { mapState } from 'pinia';
import { useUserInfoStore } from '@/store/index';
import { checkLogin, checkUserInfo } from '@/common/common';
import { guestIdentity, updateGuestIdentity } from '@/common/api/api';
export default {
	data() {
		return {
            model: {
                nickname: '',
                company: '',
                position: ''
            },
            rules: {
                nickname: [{
                    max: 10,
                    required: true,
                    message: '请填写姓名,最多10个字符',
                    trigger: ['change','blur']
                }],
                company: [{
                    max: 10,
                    required: true,
                    message: '请填写机构/公司名称,最多10个字符',
                    trigger: ['change','blur']
                }]
            },
            scrollAnimate: false
		}
	},
    computed:{
        ...mapState([useUserInfoStore, 'userInfo'])
    },
    onPageScroll() {
        const that = this;
        that.scrollAnimate = true;
        this.$u.debounce(function() {
            that.scrollAnimate = false;
        }, 500);
    },
    onReady() {
        //#ifdef MP-WEIXIN || MP-BAIDU
        this.$refs.uForm.setRules(this.rules);
        //#endif
    },
    onLoad(options) {
        let that = this;
        uni.$check_and_login(function() {
            that.init()
        })
    },
    onShareAppMessage(res) {
        return {
            title: `欢迎加入特邀嘉宾`,
            path: '/pages/login/guest-join',
        }
    },
	methods: {
        //初始化数据
        init() {
            guestIdentity().then(res => {
                if(res.status == 0) {
                    this.model = res.detail;
                }
            })
        },
        
        //提交表单
		submit() {
            if(!checkLogin()) {
                uni.navigateTo({
                    url: '/pages/login/login'
                })
                return
            }
            if(!checkUserInfo()) {
                uni.navigateTo({
                    url: `/pages/login/user-info-form`
                })
                return
            }
            
            const that = this;
            //#ifdef MP-TOUTIAO
            if(!this.model.nickname || !this.model.company) return this.$u.toast('请完善信息');
            if(this.model.position.length > 10) return this.$u.toast('职位名称最多10个字符');
            updateGuestIdentity(this.model).then(res => {
                if(res.status == 0) {
                    uni.showModal({
                    	title: '提交成功',
                    	content: '审核通过后即可展示嘉宾身份信息',
                        showCancel: false,
                        confirmText: '前去问答',
                    	success: function (resSucc) {
                    		if (resSucc.confirm) {
                                uni.switchTab({
                                    url: '/pages/tabBar/FAQ/FAQ'
                                })
                    		}
                    	}
                    });
                }else {
                    uni.$u.toast(res.detail);
                }
            })
            //#endif
            
            //#ifdef MP-WEIXIN || MP-BAIDU
            this.$refs.uForm.validate().then(valid => {
                if (valid) {
                    if(this.model.position.length > 10) return this.$u.toast('职位名称最多10个字符');
                    updateGuestIdentity(this.model).then(res => {
                        if(res.status == 0) {
                            uni.showModal({
                            	title: '提交成功',
                            	content: '审核通过后即可展示嘉宾身份信息',
                                showCancel: false,
                                confirmText: '前去问答',
                            	success: function (resSucc) {
                            		if (resSucc.confirm) {
                                        uni.switchTab({
                                            url: '/pages/tabBar/faq/index'
                                        })
                            		}
                            	}
                            });
                        }else {
                            uni.$u.toast(res.detail);
                        }
                    })
                }
            })
            //#endif
		}
	}
};
</script>

<style lang="scss" scoped>
.loginPage {
    min-height: 100vh;
    overflow: hidden;
    line-height: 1.3;
    .topImg{
        margin: 40rpx 28rpx;
        border-radius: 20rpx;
        overflow: hidden;
        height: 185rpx;
        background-image: url("https://image.srea.org.cn/xcx/guest-join-top-bg.jpg");
    }
	.content {
		margin: 0rpx 30rpx;
		.inp {
			text-align: left;
			margin-bottom: 10rpx;
			padding-bottom: 6rpx;
		}
        .phoneLogin{
            background-color: $theme-color;
        }
		.getCaptcha {
			color: #FFFFFF;
			border: none;
			font-size: 30rpx;
			padding: 12rpx 0;
			&::after {
				border: none;
			}
		}
	}
}
</style>